<template>
	<view class="receive-main-box" @click="close">
		<view class="receive-box">
			<view class="receive-box-bg">
				<!-- <view class="receive-title">领热门VIP</view>
				<view class="receive-sub-title">所有视听会员13任选其一领取</view> -->
				<swiper class="hot-swiper" circular indicator-dots indicator-active-color="#fda24e" autoplay
					interval="3500" display-multiple-items="3">
					<swiper-item v-for="(item,index) in vipList" :key="index">
						<view class="item" v-for="(img,imgIndex) in item.list">
							<image class="img" mode="widthFix" :src="img.image2" @click="receive(img)"></image>
							<div class="btn" @click.stop="receive(img)">
								<template v-if="!userInfo">
									领取
								</template>
								<template v-else>{{ isReceiveCount ? '领取' : '已领取' }}</template>
							</div>
						</view>
					</swiper-item>

				</swiper>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import userApi from '@/api/userApi.js'
	import productApi from "@/api/productApi";
	const vipList = ref([])

	const emits = defineEmits(['use', 'close'])

	onMounted(() => {
		if (uni.getStorageSync('tel') != '' && uni.getStorageSync('tel') != undefined) {
			productApi.initReceiveVipList(dataList => {
				vipList.value = dataList
			})
		} else {
			uni.showToast({
				icon: 'error',
				title: '请先登录'
			})
			uni.reLaunch({
				url: '/pages/index/index'
			})
			userApi.loginOut()
		}

	})

	const receive = (item) => {
		emits('use', item)
	}
	const close = () => {
		emits('close')
	}
</script>

<style lang="scss" scoped>
	.receive-main-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url("https://qiming-1308147483.cos.ap-chengdu.myqcloud.com/doc%2Fpinzhi_shenghuo_huiyuan_quanyi%2Fcommon%2Flogin-shadow-bg.png") repeat;
		z-index: 2;

		.receive-box {
			border-radius: 20rpx;
			background: url("../../static/images/back1.png") no-repeat;
			background-size: cover;
			padding: 130rpx 20rpx 30rpx;
			width: 90%;
			max-height: 70vh;
			margin: 0 auto;
			box-sizing: border-box;
			overflow-y: auto;
		}

		.receive-box-bg {}
	}

	.receive-title {
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 4rpx;
		color: #f9dba9;
	}

	.receive-sub-title {
		font-size: 22rpx;
		letter-spacing: 2rpx;
		color: #d18c6c;
		text-align: center;
		margin-top: 10rpx;
	}




	.hot-swiper {
		margin-top: 20rpx;
		min-height: 530rpx;

		::v-deep .uni-swiper-dot-active {
			background-color: #fda24e !important;
		}

		.item {
			background-image: linear-gradient(2deg,
					#fee1a9 0%,
					#eda058 94%),
				linear-gradient(#ebe3d2,
					#ebe3d2);
			border-radius: 20rpx;
			position: relative;
			width: 95%;
			margin-bottom: 10rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.img {
				max-width: 100%;
				height: auto;
				display: block;
			}

			.btn {
				width: 120rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20rpx;
				background: #a30004;
				color: #fed398;
				text-align: center;
				position: absolute;
				bottom: 15rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 25rpx;
			}
		}
	}
</style>